<template>
	<view class="oexswap">
		<image src="../../static/image/oexswapbg.png" class="bg" ></image>
		<view class="titleContent">
			<image class="backIcon" src="../../static/image/oexbackIcon.png" @tap="back"></image>
			<view class="title">
				<image src="../../static/image/oexswapIcon.png"></image>
				<text>资产兑换</text>
			</view>
			<view class="right">
				<text class="userName">iwillhappyddddddddddddd</text>
				<image src="../../static/image/1024.png" @tap="set = true"></image>
			</view>
		</view>
		<view class="box">
			<view class="boxTitle">
				<text class="titleText" :class="nav?'active':''" @tap="nav = !nav">兑换</text>
				<text class="titleText" :class="!nav?'active':''" @tap="nav = !nav">资金池</text>
			</view>
			<!-- 兑换 -->
			<view class="duihuan" v-if="nav">
				<view class="view1"><text>余额：111</text><text>支付</text></view>
				<view class="view2">
					<view class="view2Left">
						<image src="../../static/image/oexBinIcon.png" class="oexbinIcon"></image>
						<view class="bin"><text>OEX</text><text>oex.com</text></view>
						<image src="../../static/image/oexdownIcon.png" class="oexdown"></image>
					</view>
					<view class="view2Right">100</view>
				</view>
				<image src="../../static/image/oexicon2.png" class="oexicon2"></image>
				<view class="view1">
					<text>余额：111</text><text>获取</text>
				</view>
				<view class="view2">
					<view class="view2Left">
						<image src="../../static/image/oexicon3.png" class="oexbinIcon"></image>
						<view class="bin">
							<text>oDAI</text>
							<text>odai.token</text>
						</view>
						<image src="../../static/image/oexdownIcon.png" class="oexdown"></image>
					</view>
					<view class="view2Right">1</view>
				</view>
				<view class="view1" style="margin-top: 47rpx;">
					<view class="price" style="color: #8687A3;">兑换价格<image src="../../static/image/oexicon4.png"></image></view>
					<text>1OEX=2.2323445 USDT</text>
				</view>
				<view class="view1"><text>交易手续费0.3%</text><text>0.3 OEX</text></view>
				<view class="view1"><text>最少可接受oDAI数量</text><text>0.99 oDAI</text></view>
				<view class="view1"><text>交易列表</text></view>
				<view class="view1"><text style="color: #00C9A7;">交易记录></text></view>
				<image src="../../static/image/oexbtn.png" class="oexbtn"></image>
			</view>
			<!-- 资金池 -->
			<view class="duihuan" v-else>
				<view class="view1"><text>余额：111</text><text>资产ID：0</text></view>
				<view class="view2">
					<view class="view2Left">
						<image src="../../static/image/oexBinIcon.png" class="oexbinIcon"></image>
						<view class="bin"><text>OEX</text><text>oex.com</text></view>
						<image src="../../static/image/oexdownIcon.png" class="oexdown"></image>
					</view>
					<input type="number" placeholder="点击输入金额" class="amount" placeholder-class="amountPlaceholder"/>
				</view>
				<image src="../../static/image/oexadd.png" class="oexicon2"></image>
				<view class="view1">
					<text>余额：111</text><text>资产ID：0</text>
				</view>
				<view class="view2">
					<view class="view2Left">
						<image src="../../static/image/oexicon3.png" class="oexbinIcon"></image>
						<view class="bin">
							<text>oDAI</text>
							<text>odai.token</text>
						</view>
						<image src="../../static/image/oexdownIcon.png" class="oexdown"></image>
					</view>
					<input type="number" placeholder="点击输入金额" class="amount" placeholder-class="amountPlaceholder"/>
				</view>
				<view class="view3">
					<view class="view3_1">
						<text class="text1">兑换价格</text>
						<view class="text2">1OEX=2.2323445 USDT <image src="../../static/image/oexicon4.png"></image></view>
					</view>
					<view class="view3_1">
						<text class="text1">年化收益率</text>
						<text class="text2">交易手续费：6.09% + 做市挖矿：335.06% </text>
					</view>
					<view class="view3_1">
						<view class="text1">流动池数量 <text style="color: #00C9A7;margin-left: 15rpx;">做市详情></text></view>
						<view class="text2">786785.8656675 <text style="color: #00C9A7;">DOP</text> / 54366545.6584 <text style="color: #00C9A7;">EOS</text></view>
						<view class="text2 text3">成为做市商可赚取交易手续费<image src="../../static/image/oexquestion.png" class="oexquestion" @tap="tipHandler"></image></view>
					</view>
				</view>
				<image src="../../static/image/oexJoinBtn.png" class="oexbtn" @click="marketHandler"></image>
			</view>
		</view>
		<tip v-if="tip" :tipTitle="tipTitle" :tipContent="tipContent" @close="close"></tip>
		<setTransaction v-if="set" @close="set=false"></setTransaction>
	</view>
</template>

<script>
	import tip from '../../components/tip/tip.vue'
	import setTransaction from '../../components/set-transaction/set.vue'
	export default{
		data(){
			return{
				nav:true,
				tip:false,
				set:false,
				tipTitle:"提供流动性",
				tipContent:"为交易对提供流动性，不需要额外支付任何费用，并且可按流动性占比获得用户交易的0.30%手续费。"
			}
		},
		components:{ tip,setTransaction },
		methods:{
			tipHandler(){
				this.tip = true;
			},
			close(){
				this.tip = false;
			},
			marketHandler(){
				this.$CommonJS.navigateTo('./market')
			},
			back(){
				this.$CommonJS.navigateBack();
			}
		}
	}
</script>

<style scoped>
	@import url("./oexswap.css");
</style>
